import CommonDrawer from '@/components/CommonDrawer';
import CommonTable from '@/components/CommonTable';
import request from '@/utils/request';
import { useRequest } from 'ahooks';
import { Button, message } from 'antd';
import dayjs from 'dayjs';
import { useEffect, useState } from 'react';

const BindTrip = (props) => {
  const { lineId, vehicleId, loadTime, unloadTime, value, onChange } = props;
  const [open, setOpen] = useState(false);
  const [selectedRowKeys, setSelectedRowKeys] = useState(value ? [value] : []);
  const { data, loading, runAsync } = useRequest(
    async (params) => {
      const res = await request({
        url: '/datas/trip/weight/time/list',
        method: 'GET',
        params,
      });
      return res;
    },
    { manual: true },
  );

  useEffect(() => {
    if (open) {
      setSelectedRowKeys(value ? [value] : []);
    }
  }, [value, open]);

  useEffect(() => {
    if (open && lineId && vehicleId && unloadTime) {
      runAsync({
        lineId,
        vehicleId,
        loadTime: loadTime
          ? dayjs(loadTime, 'YYYYMMDDHHmm').format('YYYY-MM-DD HH:mm:ss')
          : undefined,
        unloadTime: dayjs(unloadTime, 'YYYYMMDDHHmm').format(
          'YYYY-MM-DD HH:mm:ss',
        ),
      });
    }
  }, [open, lineId, vehicleId, loadTime, unloadTime]);

  const handleOk = () => {
    onChange?.(selectedRowKeys[0]);
    setOpen(false);
  };

  const columns = [
    {
      title: '趟次编号',
      dataIndex: 'tripId',
      // fixed: 'left',
      width: 200,
    },
    {
      title: '组织',
      dataIndex: 'groupName',
      // fixed: 'left',
      width: 220,
    },
    {
      title: '线路',
      dataIndex: 'lineName',
      // fixed: 'left',
      width: 280,
    },
    {
      title: '车牌号',
      dataIndex: 'license',
      // fixed: 'left',
      width: 120,
    },
    {
      title: '装车司机',
      dataIndex: 'loadDriver',
      width: 100,
    },
    {
      title: '卸车司机',
      dataIndex: 'unloadDriver',
      width: 100,
    },
    {
      title: '进装车地时间',
      dataIndex: 'inLoadTime',
      width: 180,
    },
    {
      title: '出装车地时间',
      dataIndex: 'outLoadTime',
      width: 180,
    },
    {
      title: '进卸货地时间',
      dataIndex: 'inUnloadTime',
      width: 180,
    },
    {
      title: '出卸货地时间',
      dataIndex: 'outUnloadTime',
      width: 180,
    },
  ];

  const handleClick = () => {
    if (lineId && vehicleId && unloadTime) {
      setOpen(true);
    } else {
      message.info('请先选择线路、车牌号和卸车时间');
    }
  };
  return (
    <div>
      <Button block onClick={handleClick}>
        {value || '绑定趟次'}
      </Button>
      <CommonDrawer
        title="绑定趟次"
        open={open}
        onClose={() => setOpen(false)}
        onOk={handleOk}
        width={1200}
        destroyOnHidden
        afterOpenChange={(_open) => {
          if (!_open) {
            setSelectedRowKeys([]);
          }
        }}
      >
        <CommonTable
          rowKey="tripId"
          columns={columns}
          dataSource={data || []}
          loading={loading}
          rowSelection={{
            type: 'radio',
            fixed: 'left',
            selectedRowKeys,
            onChange: (_selectedRowKeys) => {
              setSelectedRowKeys(_selectedRowKeys);
            },
          }}
          pagination={false}
        />
      </CommonDrawer>
    </div>
  );
};

export default BindTrip;
